import React, { forwardRef, useImperativeHandle, useRef } from 'react'
const Son = forwardRef((props, ref) => {
  const inputRef = useRef(null)
  const handleFocus = () => {
    inputRef.current.focus()
  }
  //   将聚焦方法暴露出去
  useImperativeHandle(ref, () => ({
    handleFocus
  }))
  return <input type='text' ref={inputRef} />
})
export default function UseImperativeHandleApp() {
  const sonRef = useRef(null)
  const handleClick = () => {
    console.log(sonRef,'===')
    sonRef.current.handleFocus()
  }
  return (
    <div>
        <h1>UseImperativeHandleApp</h1>
        <Son ref={sonRef}/>
        <button onClick={handleClick}>Focus</button>
    </div>
  )
}
